<template>
	<div class="card-collection-record">
		<p>
			<span class="label">模板结果：</span>
			<span class="value">{{ cardCollectionResult.templateResult }}</span>
		</p>
		<p>
			<span class="label">AI播报话术内容：</span>
			<span class="long-value">{{ cardCollectionResult.aiSpeak }}</span>
		</p>
		<p>
			<span class="label">卡证类型:</span>
			<span class="long-value">{{ cardCollectionResult.cardType === 'ID-card' ? '身份证' : cardCollectionResult.cardType === 'bank-card' ? '银行卡' : '--' }}</span>
		</p>
		<CardUrl :urls="urls" :type="cardTCollectionype" />
		<div>
			<span class="label">{{ 'OCR识别结果:' }}</span>
			<div v-if="idCardFrontkeys.length !== 0 || idCardBackKeys.length !== 0 || bankCardKeys.length !== 0">
				<div class="id-card-container">
					<ResultWithOCR :resultKeys="idCardFrontkeys" :label="'身份证正面：'" />
					<ResultWithOCR :resultKeys="idCardBackKeys" :label="'身份证反面：'" />
				</div>
				<ResultWithOCR :resultKeys="bankCardKeys" :label="'银行卡:'" />
			</div>
			<span v-else class="long-value">{{ '--' }}</span>
		</div>
	</div>
</template>

<script>
import CardUrl from './CardUrl.vue';
import ResultWithOCR from './ResultWithOCR.vue';
export default {
	components: {
		CardUrl,
		ResultWithOCR
	},
	props: {
		record: {
			type: Object,
			default: () => {}
		}
	},
	mounted() {
		if (this.record) {
			this.cardCollectionResult.templateResult = this.getCardResult(this.record.result);
			this.cardCollectionResult.aiSpeak = this.record.data.request;
			this.cardCollectionResult.cardType = this.record.data.type || '--';
			this.cardTCollectionype = this.record.data.type || '';
			// 身份证
			if (this.record.data.collectedInfo && this.record.data.collectedInfo.urls.length !== 0) {
				this.urls = this.record.data.collectedInfo.urls;
			}

			if (this.record.data && this.record.data.ocrResult && this.record.data.ocrResult.IDCard) {
				this.idCardFrontkeys = Object.keys(this.record.data.ocrResult.IDCard.face).map(item => ({
					label: this.keysEnum[item],
					key: item,
					value: this.record.data.ocrResult.IDCard.face[item]
				}));

				this.idCardBackKeys = Object.keys(this.record.data.ocrResult.IDCard.back).map(item => ({ label: this.keysEnum[item], key: item, value: this.record.data.ocrResult.IDCard.back[item] }));
			}
			// 银行卡
			if (this.record.data && this.record.data.ocrResult && this.record.data.ocrResult.bankCard) {
				this.bankCardKeys = Object.keys(this.record.data.ocrResult.bankCard).map(item => ({
					label: this.keysEnum[item],
					key: item,
					value: this.record.data.ocrResult.bankCard[item]
				}));
			}
		}
	},
	data() {
		return {
			cardCollectionResult: {
				templateResult: '--',
				aiSpeak: '--',
				cardType: '--'
			},
			idCardFrontkeys: [],
			idCardBackKeys: [],
			bankCardKeys: [],
			cardTCollectionype: '',
			urls: [],
			keysEnum: {
				cardType: '卡片类型',
				cardNumber: '卡号',
				idNumber: '身份证号',
				name: '姓名',
				sex: '性别',
				ethnicity: '民族',
				birthDate: '出生日期',
				address: '住址',
				issueAuthority: '签发机关',
				validPeriod: '有效日期',
				bankName: '银行',
				validToDate: '有效期'
			}
		};
	},
	methods: {
		// 卡证采集结果
		getCardResult(key) {
			let str = '';
			switch (key) {
				case 'yes':
					str = '采集成功';
					break;
				case 'no':
					str = '采集失败';
					break;
				case 'other':
					str = '采集超时';
					break;
				case 'unrecognized':
					str = '识别失败';
					break;
				default:
					break;
			}

			console.log(key, str, 'XXXXX');
			return str;
		},
		// 卡证采集结果
		getCarType(key) {
			if (key === 'ID-card') return '身份证';
			if (key === 'bank-card') return '银行卡';
			return '--';
		}
	}
};
</script>
<style lang="less">
.id-card-container {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.card-collection-record,
.card-url-container {
	p {
		line-height: 28px;
	}
	span {
		display: inline-block;
	}
	.label {
		width: 150px;
	}
	.short-label {
		width: 80px;
	}
	.value {
		width: 200px;
	}
	.long-value {
		width: calc(100% - 160px);
		word-break: break-all;
	}
	.button {
		font-size: 12px;
		font-weight: 400;
		color: #6384fe;
		line-height: 24px;
		cursor: pointer;
	}
	.long-label {
		width: 230px;
	}
}
</style>
